<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件管理</title>
		<style>
			table {
				width: 85%;
				border-collapse: collapse;
				margin: 20px 0;
			}

			th,
			td {
				border: 1px solid #ddd;
				text-align: left;
				padding: 8px;
			}

			th {
				background-color: #f2f2f2;
				font-weight: bold;
			}

			tr:nth-child(even) {
				background-color: #f9f9f9;
			}

			tr:hover {
				background-color: #f1f1f1;
			}

			fieldset {
				border: 1px solid #ddd;
				padding: 20px;
				margin: 20px 0;
			}

			legend {
				padding: 0 10px;
				font-weight: bold;
			}

			input[type="text"],
			select {
				padding: 5px;
				margin: 5px 0;
				border: 1px solid #ddd;
				border-radius: 4px;
			}

			input[type="button"] {
				padding: 5px 15px;
				margin: 5px 0;
				border: none;
				background-color: #007bff;
				color: white;
				border-radius: 4px;
				cursor: pointer;
			}

			input[type="button"]:hover {
				background-color: #0056b3;
			}

			a {
				color: #007bff;
				text-decoration: none;
				font-weight: bold;
				transition: color 0.3s;
			}

			a:hover {
				color: #0056b3;
				text-decoration: underline;
			}

			.event-level {
				padding: 5px 10px;
				border-radius: 5px;
			}

			.importLevel {
				background-color: green;
				/* 低级别事件使用绿色 */
			}

			.jinji {
				background-color: red;
				/* 中等级别事件使用橙色 */
			}

			.yiban {
				background-color: orange;
				/* 高级别事件使用红色 */
			}
		</style>
	</head>
	<body>
		<fieldset>
			<legend>商品列表</legend>
			<a href="./addeventControl.html">添加事件</a><br /><br />
			事件标题：<input type="text" id="eventTitle" placeholder="请输入事件标题">
			请选择事件类型：<select id="eventType">
				<option value="">请选择事件类型</option>
			</select>
			事件级别:
			<select id="eventLevel">
				<option value="">请选择事件级别</option>
				<option value="重要">重要</option>
				<option value="紧急">紧急</option>
				<option value="一般">一般</option>
			</select>
			是否完成:
			<select id="eventStatus">
				<option value="">请选择事件状态</option>
				<option value="未完成">未完成</option>
				<option value="已完成">已完成</option>
				<option value="作废">作废</option>
			</select>
			<input type="button" value="查询" onclick="search()"><br /><br />

			<table border="1">
				<thead>
					<tr>
						<th>事件分类</th>
						<th>事件标题</th>
						<th>事件起始日期</th>
						<th>事件截止日期</th>
						<th>事件描述</th>
						<th>事件级别</th>
						<th>是否完成</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>
		</fieldset>

		<script type="text/javascript">
			window.onload = function() {
				const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token

				// 发送异步请求获取事件列表
				fetch('http://localhost:8080/user/listInfo', {
						method: 'GET',
						headers: {
							'Authorization': sessionStorage.getItem('authToken'), // 从sessionStorage获取token
						},
					})
					.then((response) => response.json())
					.then((data) => {
						if (data.code === 1) {
							var dataProducts = data.data;
							var trs = '';
							for (var i = 0; i < dataProducts.length; i++) {
								var product = dataProducts[i];
								var category = product.eventCategories.length > 0 ? product.eventCategories[0] : {};
								var event = product.eventManagement.length > 0 ? product.eventManagement[0] : {};

								// 根据事件级别动态添加类
								var levelClass = '';
								switch (event.level) {
									case '重要':
										levelClass = 'importLevel';
										break;
									case '紧急':
										levelClass = 'jinji';
										break;
									case '一般':
										levelClass = 'yiban';
										break;
								}

								var tr = `<tr>
                            <td>${category.categoryName || ''}</td>
                            <td>${event.title || ''}</td>
                            <td>${event.startDate || ''}</td>
                            <td>${event.endDate || ''}</td>
                            <td>${event.description || ''}</td>
                            <td><span class="event-level ${levelClass}">${event.level || ''}</span></td>
                            <td>${event.status || ''}</td>
                            <td><a href="editEvent.html?id=${event.id}&categoryid=${event.categoryId}">编辑</a>&nbsp;&nbsp;<a href="eventControl.html" onclick="deleteProduct('${event.id}')">删除</a></td>
                        </tr>`;
								trs += tr;
							}
							document.getElementById("tbody").innerHTML = trs;
						}
					})
					.catch((e) => console.log('error', e));

				fetch("http://localhost:8080/category/list", {
						method: 'GET',
						headers: {
							'Authorization': token, // 在请求头中包含token
						},
					})
					.then((response) => response.json())
					.then((data) => {
						const eventTypeSelect = document.getElementById("eventType");
						data.data.forEach((type) => {
							const option = document.createElement("option");
							option.value = type.id; // 设置option的value为type.id
							option.textContent = type.categoryName; // 设置option的文本内容为type.name
							eventTypeSelect.appendChild(option);
						});
					})
					.catch((e) => console.log('error', e));
			}

			function deleteProduct(id) {
				// 发送异步请求
				fetch("http://localhost:8080/management/delete?id=" + id)
					.then((response) => response.json())
					.then((data) => {
						// 删除成功后重新加载页面数据
						window.location.href = "eventControl.html";
					})
					.catch((e) => console.log('error', e));
			}

			function search() {
				// 获取用户输入的值
				const categoryid = document.getElementById("eventType").value;
				const title = document.getElementById("eventTitle").value;
				const level = document.getElementById("eventLevel").value;
				const status = document.getElementById("eventStatus").value;
				const token = sessionStorage.getItem('authToken'); // 从sessionStorage获取token

				// 发送异步请求
				const event = {
					categoryId: categoryid,
					title: title,
					level: level,
					status: status,
				};
				fetch("http://localhost:8080/management/likeSearch", {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
							'Authorization': token,
						},
						body: JSON.stringify(event),
					})
					.then((response) => response.json())
					.then((data) => {
						if (data.code === 1) {
							var dataProducts = data.data;
							var trs = '';
							for (var i = 0; i < dataProducts.length; i++) {
								var product = dataProducts[i];
								var category = product.eventCategories || {};

								var levelClass = '';
								switch (product.level) {
									case '重要':
										levelClass = 'importLevel';
										break;
									case '紧急':
										levelClass = 'jinji';
										break;
									case '一般':
										levelClass = 'yiban';
										break;
								}

								var tr = `<tr>
                            <td>${category.categoryName || ''}</td>
                            <td>${product.title || ''}</td>
                            <td>${product.startDate || ''}</td>
                            <td>${product.endDate || ''}</td>
                            <td>${product.description || ''}</td>
                            <td><span class="event-level ${levelClass}">${product.level || ''}</span></td>
                            <td>${product.status || ''}</td>
                            <td><a href="editEvent.html?id=${product.id}&categoryid=${product.categoryId}">编辑</a>&nbsp;&nbsp;<a href="eventControl.html" onclick="deleteProduct('${product.id}')">删除</a></td>
                        </tr>`;
								trs += tr;
							}
							document.getElementById("tbody").innerHTML = trs;
						} else {
							alert(data.message);
						}
					})
					.catch((e) => console.log('error', e));
			}
		</script>
	</body>
</html>